<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<!-- 通过margin 牵一发而动全身 太麻烦 -->
<!-- 定位 -->
<!-- 通过定位 可以自由摆放元素  -->
<!-- position
static 默认 不开启 不是都是开启
relative 相对定位
absolute 绝对定位
fixed 固定定位
sticky 粘滞定位 -->
<!-- 只是选中元素开启了定位   -->
<!-- 相对定位特点：1.如果不设置偏移量 不发生任何的变化 -->
<!-- offset 设置位置  有点像margin  更灵活 偏移量  仅仅移动自己  不是影响别人
    所以可能会覆盖住其他的元素 -->
<!-- top  定位元素和定位位置上面的距离  其他亦然  垂直位置 
    bottom left right 四个方向的偏移量 -->
<!-- 通常情况下只使用两者之一 -->
<!-- 自己摸索吧 -->
<!-- 生效的前提是开启定位 -->
<!-- 优点是只移动自己 -->
<!-- 参照物是自己的左上角  参照元素在文档流中的位置 -->
<!-- 相对于刚才的位置 -->
<!-- 相对定位提高元素的层级  但并没有脱离文档流 -->
<!-- 如果不设置偏移量 不会发生任何的变化 -->
<!-- 不会改变元素的性质 块还是块 行内还是行内 -->

</html>